<template>
    <div class="avatar-example">
        <div class="avatar-row">
            <f-avatar size="small" src="./assets/images/fufu.gif" hover @click="openAlert" />
            <f-avatar src="FUFU" hover />
            <f-avatar size="40">FOFO</f-avatar>
        </div>
    </div>
</template>

<script setup>
const openAlert = () => {
    alert('弹窗组件正在开发中...')
}
</script>

<style lang="less" scoped>
.avatar-example {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    .avatar-row {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        align-items: flex-end;
    }

    .avatar-row>* {
        margin: 0;
    }
}
</style>
